<template>
  <div>
    <van-cell is-link @click="showPopup">选择</van-cell>
    <van-popup
      v-model="show"
      closeable
      position="bottom"
      :style="{ height: '65%' }"
    >
      <div v-for="(item, index) in arr" :key="index">
        <div id="top">
          <img :src="item.goodsImg" alt="" />
          <div>
            <span>{{ item.goodsPrice }}</span>
            <p>已选{{ item.goodsColor }}</p>
          </div>
        </div>
        <div id="color">
          <span>颜色</span>
          <p>{{ item.goodsColor }}</p>
        </div>
        <div id="size">
          <span>尺码</span>
          <p id="cs">
            <span v-for="(size, indexs) in item.goodsSize" :key="indexs">{{
              size
            }}</span>
          </p>
        </div>
        <div id="purchase">
          <span>购买数量</span>
          <div class="rdson">
            <p><van-icon name="minus" @click="reduce" /></p>
            <span><input type="text" v-model="count" /></span>
            <p><van-icon name="plus" @click="add" /></p>
          </div>
        </div>
        <p id="cart" @click="onClickButton">加入购物车</p>
      </div>
    </van-popup>
  </div>
</template>

<script>
import Vue from "vue";
import { Popup } from "vant";
import { Icon } from "vant";
Vue.use(Popup);
Vue.use(Icon);
import axios from "axios";
export default {
  name: "selects",
  data() {
    return {
      show: false,
      obj: JSON.parse(this.$route.query.obj),
      arr: [],
      count: 1,
      goodsName: "",
      goodsPrice: "",
      goodsImg: "",
      goodsColor: "",
    };
  },

  methods: {
    showPopup() {
      this.show = true;
    },
    reduce() {
      this.count--;
      if (this.count <= 1) {
        this.count = 1;
        return;
      }
    },
    add() {
      this.count++;
      // console.log("hahhahhaha",this.count);
    },
    onClickButton() {
      this.username = sessionStorage.getItem("username");
      console.log(this.username);
      if (this.username != "") {
        let res = this.arr;
        this.$router.push({ path: "/cart" });
        axios({
          url: "/carts",
          method: "post",
          data: {
            goodsId: res.goodsId,
            goodsName: this.goodsName,
            goodsPrice: this.goodsPrice,
            goodsImg: this.goodsImg,
            goodsCount: this.count,
            goodsColor: this.goodsColor,
            username: this.username,
          },
        });
      } else {
        this.$router.push({ path: "/Login" });
      }
    },
  },
  created() {
    // console.log("nnnn");
    let id = this.obj.goodsId;
    axios({
      url: "/List",
      method: "get",
      params: {
        goodsId: id,
      },
    }).then((res) => {
      // console.log("接收", res.data);
      // console.log("发送", id);

      res.data.map((item) => {
        if (item.goodsId == id) {
          // console.log("我才是你要的数据" + item);
          this.arr.push(item);
          // console.log("Size", item.goodsSize);
          // console.log("arr", this.arr);
          // this.arr = item;
          // console.log(item);
          // console.log(this.arr);
          this.goodsName = item.goodsName;
          this.goodsPrice = item.goodsPrice;
          this.goodsImg = item.goodsImg;
          this.goodsColor = item.goodsColor;
        }
      });
    });
  },
};
</script>

<style scoped>
#top {
  margin: 0 auto;
  width: 90%;
  height: 1.5rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
#top > img {
  width: 1rem;
  height: 1rem;
}
#color {
  margin: 0 auto;
  width: 90%;
  height: 0.75rem;
}
#color > p {
  width: 0.6rem;
  height: 0.3rem;
  border: 0.005rem solid gainsboro;
  margin-top: 0.1rem;
}
#cs {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#cs > span {
  display: inline-block;
  width: 0.6rem;
  height: 0.3rem;
  border: 0.005rem solid gainsboro;
  margin-top: 0.1rem;
}
#size {
  margin: 0 auto;
  width: 90%;
}
#purchase {
  margin: 0 auto;
  width: 90%;
  height: 0.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rdson {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 0.8rem;
  margin-right: 0.15rem;
}
.rdson > p {
  width: 0.2rem;
  height: 0.2rem;
  border: 0.005rem solid #000;
  line-height: 0.2rem;
  text-align: center;
}
.rdson > span > input {
  display: inline-block;
  width: 0.2rem;
  border: none;
  text-align: center;
}
#cart {
  width: 90%;
  height: 0.35rem;
  margin: 0 auto;
  background-color: #f9bc20;
  text-align: center;
  line-height: 0.35rem;
}
</style>